<!DOCTYPE html>
<html>
<!--
Animates a letter writing process using only the power of HTML, CSS and SVG

Inspired by this answer by web-tiki: (https://stackoverflow.com/a/37211344).
When you load the page, it shows an animation of the letter drawing. You can
easily animate any character you want with this. Strokes doesn't have to be
just lines. Any kind of squiggly lines welcome! ...as long as you can draw it
with vector strokes.

# Usage:
- Create a new document (e.g. 400px x 500px) on Inkscape
- Select any tool and draw like you'd draw a character
- Do not apply any stroke style, because
    (a) we override styles through CSS
    (b) it will introduce "stroke-dasharray" property to markup
        which we don't want
- Save it somewhere as a .svg file
- Open the svg file in a text editor and copy-paste the contents inside the
  "animzone" div (see below)
- Load it on a web browser and it should animate it

# Limitations:
- It can handle 5 strokes (which should be adequate for simple characters)
  [More can be added by adding more animation-delay definitions]
- It can't play on click with pure CSS (at least as much as I know)
  [But this can done by removing "animzone" class from HTML and then adding
  it back with simple JavaScript code]
  [If you find some other techniques let me know: adnan360.com/contact]

# License: CC0

Be sure to create something wonderful for the world!
Teach something.
-->
<head>
	<title>HTML+CSS letter animation (No JS!)</title>
	<style type="text/css">
	.animzone path {
		/* We don't need fills */
		fill: transparent !important;
		/* We override the stroke color */
		stroke: #000 !important;
		/* We override the stroke width */
		stroke-width: 1 !important;
		/* Ensures nothing is shown on the starting point of the animation */
		stroke-dasharray: 0,800,800;
		/* We'll animate stroke */
		animation: writing_stroke 8s ease-out;
		/* Retain the last properties set by the animation */
		animation-fill-mode: forwards;
	}
	/* We set animation delay for later strokes, otherwise they'll be drawn simultaneously */
	.animzone path:nth-child(2) {
		animation-delay: 2s;
	}
	.animzone path:nth-child(3) {
		animation-delay: 4s;
	}
	.animzone path:nth-child(4) {
		animation-delay: 6s;
	}
	.animzone path:nth-child(5) {
		animation-delay: 8s;
	}
	/* The keyframes that does the animation. */
	@keyframes writing_stroke {
		from { stroke-dasharray: 0,800,800; }
		to { stroke-dasharray: 800,0,0; }
	}
	</style>
</head>
<body>
<div class="animzone">
<!-- Paste the SVG code inside this div. Check instructions above. -->

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="400"
   height="500"
   viewBox="0 0 105.83333 132.29167"
   version="1.1"
   id="svg56"
   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
   sodipodi:docname="t.svg">
  <defs
     id="defs50" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.7"
     inkscape:cx="268.35748"
     inkscape:cy="217.14286"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     inkscape:document-rotation="0"
     showgrid="false"
     units="px"
     inkscape:window-width="1024"
     inkscape:window-height="697"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata53">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <path
       style="fill:none;stroke:#000000;stroke-width:1.494;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 18.618638,113.08047 C 56.393336,94.278412 62.403018,23.84354 57.064425,23.297869 51.725835,22.752198 47.138042,105.9273 50.147629,110.37317 53.157215,114.81906 69.74174,100.35205 69.74174,100.35205"
       id="path58" />
    <path
       style="fill:none;stroke:#000000;stroke-width:1.494;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 35.192562,46.657659 c 15.03136,-1.331507 31.709506,1.801773 41.20547,0"
       id="path60"
       sodipodi:nodetypes="cc" />
  </g>
</svg>


</div>
</body>
</html>